<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<div id="app">
		{{message}}
	</div>

	<div id="app2">
		<span v-bind:title="title">abc</span>
	</div>

	<div id="app3">
		<p v-if="seen">Now you see me</p>
	</div>

	<div id="app4">
		<ol>
			<li v-for="todo in todos">
				{{todo.text}}
			</li>
		</ol>
	</div>

	<hr>

	<div id="app5">
		<p>{{message}}</p>
		<button v-on:click="showMsg">my btn</button>
	</div>

	<hr>

	<div id="app6">
		<p>{{message}}</p>
		<input type="text" v-model="message">
	</div>

	<hr>

	<div id="app7">
		<ul>
			<wbc8 v-for="todo in todos" v-bind:todo="todo"></wbc8>
		</ul>
	</div>
	
	<script src="node_modules/vue/dist/vue.min.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello WBC!'
			}
		});

		/////////////////////////////////////
		var app2 = new Vue({
			el: '#app2',
			data: {
				title: 'You loaded this page on ' + new Date()
			}
		});

		/////////////////////////////////////
		var app3 = new Vue({
			el: '#app3',
			data: {
				seen: false
			}
		});

		/////////////////////////////////////
		var app4 = new Vue({
			el: '#app4',
			data: {
				todos: [
					{ text: 'Learn JavaScript' },
					{ text: 'Learn Vue' },
					{ text: 'Build something awesome' }
				]
			}
		});

		/////////////////////////////////////
		var app5 = new Vue({
			el: '#app5',
			data: {
				message: 'Hello Vue.js'
			},
			methods: {
				showMsg: function() {
					console.log(this);
					this.message = this.message.split('').reverse().join('');
				}
			}
		});

		/////////////////////////////////////

		var app6 = new Vue({
			el: '#app6',
			data: {
				message: 'Hello Vue'
			}
		});

		/////////////////////////////////////

		Vue.component('wbc8', {
			props: ['todo'],
			template: '<li>{{todo.text}}</li>'
		});

		var app7 = new Vue({
			el: '#app7',
			data: {
				todos: [
					{ text: 'Learn JavaScript' },
					{ text: 'Learn Vue' },
					{ text: 'Build something awesome' }
				]
			},
			methods: {

			}
		});
	</script>
</body>
</html>